<template>
	<view class="flex align-center px-2" style="width:70vw;">
		<!-- #ifndef H5 -->
		<view class="flex align-center fs-28" @click="clickUniMap">
			<text>{{address.label || '成都市'}}</text>
			<uni-icons type="right" size="14"></uni-icons>
		</view>
		<!-- #endif -->
		<view class="search rounded-max-lg flex-1 ml-1 flex align-center justify-between fs-28" @click="handleSearch">
			<uni-icons type="search" size="20"></uni-icons>
			<text>精品工具</text>
		</view>

		<uniMap v-if="mapFlag" @close="closeMap" @callback="callBackAddress" />
	</view>
</template>
<script>
	import {
		mapGetters
	} from 'vuex'
	import uniMap from "@/components/uniMap";
	export default {
		components: {
			uniMap
		},
		title: "搜索栏",
		props: ["res", "storeId"],
		data() {
			return {
				mapFlag: false
			}
		},
		computed: {
			...mapGetters('currentAddress'),
			address() {
				const address = uni.getStorageSync('selectCurrentAddress')
				if (address) {
					return address
				}
				return this.currentAddress
			}
		},
		methods: {
			// 关闭地图
			closeMap() {
				this.mapFlag = false;
			},
			// 打开地图并访问权限
			clickUniMap() {
				// #ifndef APP-PLUS
				this.mapFlag = true;
				// #endif
			},

			// 如果拒绝权限 提示区设置
			refuseMap() {
				uni.showModal({
					title: "温馨提示",
					content: "您已拒绝定位,请开启",
					confirmText: "去设置",
					success(res) {
						if (res.confirm) {
							//打开授权设置
							// #ifndef MP-WEIXIN
							uni.getSystemInfo({
								success(res) {
									if (res.platform == "ios") {
										//IOS
										plus.runtime.openURL("app-settings://");
									} else if (res.platform == "android") {
										//安卓
										let main = plus.android.runtimeMainActivity();
										let Intent = plus.android.importClass(
											"android.content.Intent"
										);
										let mIntent = new Intent("android.settings.ACTION_SETTINGS");
										main.startActivity(mIntent);
									}
								},
							});
							// #endif
						}
					},
				});
			},
			// 选择地址后数据的回调
			callBackAddress(val) {
				console.log(val)
				uni.showLoading({
					title: "加载中",
				});

				if (val.address_component && val) {
					const address_component = val.address_component
					this.currentAddress = {
						label: address_component.city,
						location: val.location
					}
					uni.setStorageSync("selectCurrentAddress", this.currentAddress)
					uni.hideLoading();
				}

				this.mapFlag = !this.mapFlag; //关闭地图
			},

			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			handleSearch() {
				if (this.storeId) {
					uni.navigateTo({
						url: `/pages/navigation/searchPage?storeId=${this.storeId}`,
					});
				} else {
					uni.navigateTo({
						url: `/pages/navigation/searchPage`,
					});
				}

			},
		},
	};
</script>
<style lang="scss" scoped>
	.search {
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #ededed;
	}

	.layout {
		background: #fff;
		padding: 0 16rpx;
		position: relative;
	}
</style>